<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" th:href="@{/bootstrap-theme.min.css}">
		<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" th:href="@{/js/regist.css}" />
		<!--<link th:href="@{/'https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css'}" rel="stylesheet">-->

		<script th:src="@{/js/jquery.js}"></script>
		<script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
		<script type="text/javascript" th:src="@{js/vue.js}"></script>
		<!--<script th:src="@{'https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js'}"></script>-->
	</head>
	<body>
		<div id="container-div" class="container-fluid container-div">
			<div class="row">
				<div class="col-md-6 col-md-offset-3 data">
					<form  method="post" action="/author/regist" class="form-horizontal"  enctype="multipart/form-data"  >
						<div class="form-group">
							<label for="regNumber" class="col-sm-2 control-label">账号</label>
							<div class="col-sm-10">
							    <input type="text" class="form-control" id="regNumber" name="regNumber"
									  placeholder="请输入想要的账号" maxlength="20"/>
							</div>
						</div>
						<div class="form-group">
							<label for="regName" class="col-sm-2 control-label">名字</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="regName" name="regName"
									   placeholder="请输入一个拉风的名字" maxlength="20"/>
							</div>
						</div>
					    <div class="form-group">
							<label for="regPassword" class="col-sm-2 control-label">密码</label>
							<div class="col-sm-10">
							  <input type="password" class="form-control" id="regPassword"  name="regPassword"
									 placeholder="第一次输入密码">
							</div>
					    </div>
					    <div class="form-group">
					  		<label for="ensureRegPassword" class="col-sm-2 control-label">密码</label>
					  		<div class="col-sm-10">
								<input type="password" class="form-control"  name="ensureRegPassword" id="ensureRegPassword"
									   placeholder="第二次输入密码">
							</div>
					    </div>
						<div class="form-group">
							<label for="regEmail" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10">
								<input type="email" class="form-control" id="regEmail" name="regEmail" placeholder="email">
							</div>
						</div>
						<div class="form-group">
							<label for="birDay" class="col-sm-2 control-label">生日</label>
							<div class="col-sm-5">
								<input type="date" class="form-control"  name="birDay" id="birDay" />
							</div>
							<label for="gender" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-3">
								<select class="form-control" name="gender" id="gender">
									<option value="男" selected="selected">男</option>
									<option value="女">女</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="phone" class="col-sm-2 control-label">号码</label>
							<div class="col-sm-10">
								<input type="tel" class="form-control" id="phone" name="phone"  placeholder="手机号码"/>
							</div>
						</div>
						<div class="form-group">
							<label for="constellation" class="col-sm-2 control-label">头像</label>
							<div class="col-sm-2">
								<input type="file" name="regHeadImg" id="regHeadImg" />
							</div>
							<label for="constellation" class="col-sm-2 control-label">星座</label>
							<div class="col-sm-2">
								<select class="form-control" name="constellation" id="constellation">
									<option value="ARIES">白羊座</option>
									<option value="TAURUS">金牛座</option>
									<option value="GEMINI">双子座</option>
									<option value="CACER">巨蟹座</option>
									<option value="LEO">狮子座</option>
									<option value="VIRGO">处女座</option>
									<option value="LIBRA">天秤座</option>
									<option value="SCORPIO">天蝎座</option>
									<option value="SAGITTARIUS">射手座</option>
									<option value="CAPRICOM">摩羯座</option>
									<option value="AQUARIUS">水瓶座</option>
									<option value="PISCES">双鱼座</option>
								</select>
							</div>
							<label for="Zodiac" class="col-sm-2 control-label">生肖</label>
							<div class="col-sm-2">
								<select class="form-control" name="zodiac" id="zodiac">
									<option value="RAT">鼠</option>
									<option value="OX">牛</option>
									<option value="TIGER">虎</option>
									<option value="RABBIT">兔</option>
									<option value="DRAGON">龙</option>
									<option value="SNAKE">蛇</option>
									<option value="HORSE">马</option>
									<option value="GOAT">羊</option>
									<option value="MONKEY">猴</option>
									<option value="COCK">鸡</option>
									<option value="DOG">狗</option>
									<option value="PIG">猪</option>
								</select>
							</div>
						</div>
						<div class="form-group-md">
							<div  class="col-sm-10 col-sm-offset-2 ">
								<input id="inputPassword" type="submit" class="form-control btn btn-info " value="注册" />
							</div>
						</div>
						<div class="form-group-md">
							<div  class="col-sm-10 col-sm-offset-2 " th:if="${session.info} eq 4" >
								<label style="font-size: small;color: red">账号长度不能小于6</label>
							</div>
							<div  class="col-sm-10 col-sm-offset-2 " th:if="${session.info} eq 3" >
								<label style="font-size: small;color: red">两次输入的密码不一致</label>
							</div>
							<div  class="col-sm-10 col-sm-offset-2 " th:if="${session.info} eq 2" >
								<label style="font-size: small;color: red">账号已经存在</label>
							</div>
							<div  class="col-sm-10 col-sm-offset-2 " th:if="${session.info} eq 0" >
								<label style="font-size: small;color: red">注册出错</label>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<!--<script  type="text/javascript">
		$(function () {
			$('form').bootstrapValidator({
				message:'This value is not valid',
                feedbackIcons:{
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
				},
				fields:{
                    regNumber:{
                        message:'账号验证失败',
                        validators:{
                            notEmpty:{
                                message: '用户名不能为空'
							},
                            stringLength: {
                                min: 6,
                                max: 18,
                                message: '用户名长度必须在6到18位之间'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: '用户名只能包含大写、小写、数字和下划线'
                            }
						}
					},
                    regPassword: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 10,
                                message: '密码由6-10位字符组成'
                            },
                            identical: {
                                field: 'confirmPassword',
                                message: '密码输入不一致'
                            }
                        }
                    },
                    ensureRegPassword: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 10,
                                message: '密码由6-10位字符组成'
                            },
                            identical: {
                                field: 'regPassword',
                                message: '密码输入不一致'
                            }
                        }
                    }
				}
			})
        })
	</script>-->
</html>
